<template>
	<div class="index-page">
		<!--首页banner轮播图-->
		<swiper :options="swiperOption" ref="mySwiper" style="height: 500px; z-index: 1;">
			<swiper-slide class="index-banner" style="background-color: #03082E;">
				<div class="content index-banner-img" style="background-image: url(https://img.alicdn.com/tfs/TB19em2NOrpK1RjSZFhXXXSdXXa-1130-500.jpg_q100.jpg);"></div>
			</swiper-slide>
			<swiper-slide class="index-banner" style="background-color: #1C68FC;">
				<div class="content index-banner-img" style="background-image: url(http://img.alicdn.com/imgextra/i3/194/O1CN01KYbJmC1DItLPbQ8Y4_!!194-0-luban.jpg_q100.jpg);"></div>
			</swiper-slide>
			<!-- 分页控制器 -->
			<div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
		
		<!--首页banner导航-->
		<v-row class="content nav-panel">
			<v-col span="4" style="height: 100%;">
				<div class="banner-nav-left main-nav">
					<ul>
						<li v-for="(val, key) in navItems" :class="[currentNav==key?'nav-active':'nav-normal']" @mouseenter="openNavPanel(key)">{{key}}</li>
					</ul>
				</div>
			</v-col>
			<v-col span="20" style="height: 100%;" v-for="(val, key) in navItems" v-show="currentNav==key">
				<div class="banner-nav-right" @mouseenter="openNavPanel(key)">
					{{val.items}}
				</div>
			</v-col>
		</v-row>

		<!--教师卡片组件测试-->
		<div class="content">
			<swiper :options="teacherCardSwiperOption">
				<swiper-slide v-for="teacherInfo in teacherInfos">
					<teacherCard :teacherInfo="teacherInfo"></teacherCard>
				</swiper-slide>
			</swiper>
		</div>
		
		
	</div>

</template>

<script>

	
export default {
	data() {
		return {
			swiperOption: {
                // some swiper options/callbacks
                // 所有的参数同 swiper 官方 api 参数
                // 设置分页器
                pagination: {
                    el: '.swiper-pagination',
                    // 设置点击可切换
                    clickable :true
                },
                // 设置前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                // 设置自动轮播
                autoplay: true,
                // 设置轮播可循环
                loop : true,
                effect: 'fade',
                speed: 1000,
            },

            currentNav: '',

            navItems: {
            	'一年级': {
            		'items': ['语文1', '数学1', '英语1', '奥数1'],
            	},
            	'二年级': {
            		'items': ['语文2', '数学3', '英语', '奥数'],
            	},
            	'三年级': {
            		'items': ['语文5', '数学4', '英语', '奥数'],
            	},
            	'四年级': {
            		'items': ['语文', '数学6', '英语6', '奥数'],
            	},
            	'五年级': {
            		'items': ['语文', '数学7', '英语7', '奥数'],
            	},
            	'六年级': {
            		'items': ['语文', '数学8', '英语8', '奥数8'],
            	},
            },

            teacherInfos: [
            	{
            		'name': '李爽',
            		'subject': '高中英语',
            		'school': '上海交通大学',
            		'headImg': 'http://shanghai.yousijiajiao.com/Public/images/newpc/teacher/lishuang.png'
            	},
            	{
            		'name': '吴松茸',
            		'subject': '高中英语',
            		'school': '北京外国语大学',
            		'headImg': 'http://shanghai.yousijiajiao.com/Public/images/newpc/teacher/wulaoshi.png'
            	},
            	{
            		'name': '薛晶予',
            		'subject': '高中英语',
            		'school': '北京外国语大学',
            		'headImg': 'http://shanghai.yousijiajiao.com/Public/images/newpc/teacher/xuejingyu.png'
            	},
            ],

            teacherCardSwiperOption: {
            	pagination: '.swiper-pagination',
        		slidesPerView: 3,
        		loop : true,
        		spaceBetween: 30
            }

		}
	},



	mounted: function() {
		this.documentOnMouseOver()

	},
	methods: {
		openNavPanel: function(key) {
			this.currentNav = key
		},

		closeNavPanel: function() {
			this.currentNav = ''
		},

		documentOnMouseOver: function() {
			let that = this
			document.onmouseover = function() {
				that.closeNavPanel()
			}
		}
	}
}
	
</script>